<!-- @format -->

<template>
	<div class="home-title-container">
		<div class="up font-bold flex align-center justify_between">
			<span>
				{{ title ? title : "标题" }}
			</span>
			<slot />
		</div>
		<div class="bottom flex">
			<span></span>
			<span></span>
			<span></span>
			<div></div>
		</div>
	</div>
</template>

<script setup>
	import { defineProps } from "vue";
	defineProps(["title"]);
</script>

<style lang="less" scoped>
	.home-title-container {
		padding: 12px;
		padding-bottom: 0;
		height: 42px;
		box-sizing: border-box;
		.up {
			padding-left: 28px;
			position: relative;
			font-size: 18px;
			color: #415b73;

			&::after,
			&::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				transform: translate(50%, -50%) rotate(45deg);
				width: 14px;
				height: 14px;
				box-sizing: border-box;
			}

			&::after {
				border: 2px solid #00a0e9;
				z-index: 2;
			}

			&::before {
				background: #00ab84;
				border: 4px solid #fff;
			}
		}

		.bottom {
			height: 4px;
			margin-top: 10px;
			span {
				width: 10px;
				margin-right: 6px;
				&:nth-of-type(1) {
					background: #00a0e9;
				}
				&:nth-of-type(2) {
					background: #00ab84;
				}
				&:nth-of-type(3) {
					background: #e9d0a1;
				}
				flex: 0 0 auto;
			}

			div {
				flex: 1 1 auto;
				background: linear-gradient(
					90deg,
					#00a0e9 0%,
					rgba(0, 160, 233, 0) 100%
				);
			}
		}

		.align-center {
			align-items: center;
		}
		.justify_between{
			justify-content: space-between;
		}
		
	}
</style>
